<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      h5 {
        margin: 5px 0 5px 0;
      }
      h3 {
        margin: 8px 0 12px 0;
      }
    </style>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://tool.stepx.tech/software-up/tailwind.css"
      rel="stylesheet"
    />
    <script>
      function pay(reg) {
        //reg 为变量，可随意
        alert(decodeURI(reg));
      }
    </script>
  </head>
  <body>
    <div class="flex flex-col">
      <!-- <section
        class="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4"
      >
        <form class="relative">
          <svg
            width="20"
            height="20"
            fill="currentColor"
            class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
            />
          </svg>
          <input
            class="focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10"
            type="text"
            aria-label="Filter projects"
            placeholder="Filter projects"
          />
        </form>
      </section> -->
      <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
          <div
            class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
          >
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th
                    scope="col"
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    文件名
                  </th>
                  <th
                    scope="col"
                    class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    操作
                  </th>
                  <th
                    scope="col"
                    class="px-6 py-3 w-24 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    大小
                  </th>
                  <th
                    scope="col"
                    class="px-6 py-3 w-24 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    创建时间
                  </th>
                  <!-- <th
                    scope="col"
                    class="relative w-24 px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider text-center"
                  >
                    更新时间
                  </th> -->
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-1 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">...</div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">
                          <% if (current_path == '/') { %>
                          <a
                            href="#"
                            class="font-medium text-indigo-600 hover:text-indigo-500"
                          >
                            返回上一级
                          </a>
                          <% } else {%>
                          <a
                            href="javascript:history.back(-1)"
                            class="font-medium text-indigo-600 hover:text-indigo-500"
                          >
                            返回上一级
                          </a>
                          <% } %>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-2 whitespace-nowrap text-center">
                    <div class="text-sm font-medium text-gray-900">...</div>
                  </td>
                  <td class="px-6 py-2 whitespace-nowrap text-center">
                    <div class="text-sm text-gray-900">...</div>
                  </td>
                  <td class="px-6 py-2 whitespace-nowrap text-center">...</td>
                  <!-- <td
                    class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium"
                  >
                    ...
                  </td> -->
                </tr>
                <% result.forEach(function(file){ %>
                <tr>
                  <td class="px-6 py-2 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <!-- <% if (file.type === 'dir') { %>
                        <img
                          class="h-10 w-10"
                          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F33%2F67%2F58112c30514ba_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621066756&t=1e4961a0fae646d64d8579760a1c6943"
                          alt=""
                        />
                        <% } else {%>
                        <img
                          class="h-10 w-10"
                          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F27%2F84%2F3056d190c8efe1b.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621068534&t=ecdba7e91fc20100027b1f073e65cd9e"
                          alt=""
                        />
                        <% } %> -->

                        <img
                        class="h-10 w-10"
                        src="<%= file.icon%>"
                        alt=""
                      />

                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">
                          <a
                            href="<%=file.path.replace(root_dir,'').replace(/\\/g,'/')  %>"
                            class="font-medium text-indigo-600 hover:text-indigo-500"
                          >
                            <%= file.filename %>
                          </a>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-2 whitespace-nowrap text-center">
                    <div class="text-sm font-medium text-gray-900">
                      <% if (file.type === 'file') { %>
                      <a
                        href="<%=file.path.replace(root_dir,'').replace(/\\/g,'/')  %>"
                        download="<%=file.name%>"
                        class="font-medium text-blue-500 hover:text-indigo-500"
                      >
                        下载
                      </a>
                      <% } %>

                      <!-- <button
                        type="button"
                        class="font-medium text-indigo-600 hover:text-indigo-500 outline-none"
                        style="outline: none"
                        onclick="pay('<%=file.path%>')"
                      >
                        Click Me!
                      </button> -->
                    </div>
                  </td>
                  <td class="px-6 py-2 whitespace-nowrap text-center">
                    <div class="text-sm text-gray-900"><%= file.size %></div>
                  </td>
                  <!-- <td class="px-6 py-2 whitespace-nowrap text-center">
                    <span
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
                    >
                      <%= file.birthtime %>
                    </span>
                  </td> -->
                  <td
                    class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium"
                  >
                    <span
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full text-gray-500"
                    >
                      <%= file.mtime %>
                    </span>
                  </td>
                  <!-- <td
                      class="px-6 py-2 whitespace-nowrap text-right text-sm font-medium"
                    >
                      <a href="#" class="text-indigo-600 hover:text-indigo-900"
                        >Edit</a
                      >
                    </td> -->
                </tr>
                <% }); %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
